<template>
  <div class="qa">
    <nav-bar title="问答" />
    <main>
      <van-cell-group>
        <van-cell
          v-for="(d, i) in data"
          class="cell"
          :key="i"
          :title="d.title"
          size="large"
        >
          <template #label>
            <span>赞同 {{ getCount(d.likeCount) }}</span>
            <span>评论 {{ getCount(d.commentCount) }}</span>
            <span>{{ getTime(d.pubTimestamp) }}</span>
          </template>
          <img :src="d.thumbSrc">
        </van-cell>
      </van-cell-group>
    </main>
  </div>
</template>

<script>
import moment from 'moment';

export default {
  name: 'QaPage',
  data() {
    return {
      data: new Array(100)
        .fill(0)
        .map(() => ({
          // 标题
          title: '作为IT行业的过来人，你有什么话想对后辈说的？？？？？？？？？？',
          // 点赞数 超过999显示为999+
          likeCount: 1234,
          // 评论数 超过999显示为999+
          commentCount: 555,
          // 发布时间
          pubTimestamp: 1658482134742,
          // 缩略图
          thumbSrc: 'https://pic1.zhimg.com/80/v2-8e77b2771314f674cccba5581560d333_xl.jpg?source=4e949a73',
        })),
    };
  },
  methods: {
    getCount(num) {
      return num > 999 ? '999+' : num;
    },
    getTime(timestamp) {
      return moment(timestamp).fromNow();
    },
  },
}
</script>

<style lang="less" scoped>
@import url('@/assets/styles/common.less');

.van-cell__value {
  overflow: visible;
  flex: none;
}

.van-cell__title {
  position: relative;

  >span {
    width: 100%;
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-break: break-all;
    line-break: anywhere;
  }

  .van-cell__label {
    position: absolute;
    bottom: 0;
    width: 100%;

    span {
      margin-right: 12px;
    }
  }
}

.qa {
  .layout;

  main {

    .cell {
      padding-top: 16px;
      padding-bottom: 16px;

      img {
        width: 124px;
        height: 82px;
        border-radius: 4px;
      }
    }
  }
}
</style>
